<template>
  <div class="com-header border-1px" v-show="showHead">
    <span
      v-show="isBack" class="icon-back" @click="investBack"></span>
    {{ pageTitle }}</h2>  
  </div>
</template>

<script>
  export default {
    props: {
      pageTitle: {
        type: String,
        default: '出借详情'
      },
      isBack: {
        type: Boolean,
        default: true
      },
      // 指定跳转的路由
      backUrl: {
        type: String,
        default: ''
      }
    },
    data () {
      return {
        showHead: true
      }
    },
    created () {
      var ua = navigator.userAgent
      // var chrome = ua.match(/Chrome\/([\d.]+)/) || ua.match(/CriOS\/([\d.]+)/)
      // eslint-disable-next-line
      if (/MicroMessenger/.test(ua)) {
        this.showHead = false
      }
      // eslint-disable-next-line
      if (ua.match(/iosAndroidFMJR/)) {
        this.showHead = false
      }
    },
    methods: {
      investBack () {
        if (this.backUrl !== '') {
          this.$router.push(this.backUrl)
        } else {
          this.$router.back()
        }
      }
    }
  }
</script>
<style lang="scss">
  @import '../../common/scss/tool.scss';
  @import '../../common/scss/_variable.scss';

  .com-header {
    position: relative;
    height: 88px;
    text-align: center;
    line-height: 88px;
    background-color: $base-fff;
    font-size: 36px;
    color: $base-333;
    flex: none;
    @include border-1px(#{$base-e5e5e5});
    span {
      position: absolute;
      left: 30px;
      top: 0;
      line-height: 88px;
      color: $base-999;
    }
  }
</style>
